<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../screenshots/favicon.ico">

    <title>网格模板</title>

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="grid.css" rel="stylesheet">
  </head>

  <body>
    <div class="container">

      <h1>Bootstrap 网格模板</h1>
      <p class="lead">基本网格布局，使您熟悉网格系统中的构建。</p>

      <h3>五网格层</h3>
      <p>自举网格系统有五层，我们支持的每种设备都有一层。每层以最小视区大小开始，并自动应用于较大的设备，除非被覆盖。</p>

      <div class="row">
        <div class="col-4">.col-4</div>
        <div class="col-4">.col-4</div>
        <div class="col-4">.col-4</div>
      </div>

      <div class="row">
        <div class="col-sm-4">.col-sm-4</div>
        <div class="col-sm-4">.col-sm-4</div>
        <div class="col-sm-4">.col-sm-4</div>
      </div>

      <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
      </div>

      <div class="row">
        <div class="col-lg-4">.col-lg-4</div>
        <div class="col-lg-4">.col-lg-4</div>
        <div class="col-lg-4">.col-lg-4</div>
      </div>

      <div class="row">
        <div class="col-xl-4">.col-xl-4</div>
        <div class="col-xl-4">.col-xl-4</div>
        <div class="col-xl-4">.col-xl-4</div>
      </div>

      <h3>三列相等</h3>
      <p>从桌面开始并缩放到大型桌面，得到三个等宽的列。在移动设备、平板电脑及以下设备上，列将自动堆叠。</p>
      <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
      </div>

      <h3>三根不等长的柱子</h3>
      <p>从桌面开始并扩展到各种宽度的大型桌面，得到三列。记住，对于一个水平块，网格列应该加起来多达12个。更重要的是，无论视区如何，柱都开始堆叠。</p>
      <div class="row">
        <div class="col-md-3">.col-md-3</div>
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-3">.col-md-3</div>
      </div>

      <h3>两列</h3>
      <p>从桌面开始并缩放到大型桌面，得到两列。</p>
      <div class="row">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>
      </div>

      <h3>全宽，单列</h3>
      <p class="text-warning">全宽元素不需要网格类。</p>

      <hr>

      <h3>有两个嵌套列的两列</h3>
      <p>根据文档，只需在现有列中放置一行列，嵌套就很容易了。这将为您提供两列<strong>从桌面开始，并缩放到大型桌面，在较大的列中还有另外两列（宽度相等）。</p>
      <p>在移动设备大小、平板电脑和向下，这些列及其嵌套列将堆叠在一起。</p>
      <div class="row">
        <div class="col-md-8">
          .col-md-8
          <div class="row">
            <div class="col-md-6">.col-md-6</div>
            <div class="col-md-6">.col-md-6</div>
          </div>
        </div>
        <div class="col-md-4">.col-md-4</div>
      </div>

      <hr>

      <h3>混合：移动和桌面</h3>
      <p>引导v4网格系统有五层类：xs（超小）、sm（小）、md（中）、lg（大）和xl（超大）。几乎可以使用这些类的任意组合来创建更动态和更灵活的布局。</p>
      <p>每一层类都会扩展，这意味着如果计划为XS和SM设置相同的宽度，则只需指定XS。</p>
      <div class="row">
        <div class="col-12 col-md-8">.col-12 .col-md-8</div>
        <div class="col-6 col-md-4">.col-6 .col-md-4</div>
      </div>
      <div class="row">
        <div class="col-6 col-md-4">.col-6 .col-md-4</div>
        <div class="col-6 col-md-4">.col-6 .col-md-4</div>
        <div class="col-6 col-md-4">.col-6 .col-md-4</div>
      </div>
      <div class="row">
        <div class="col-6">.col-6</div>
        <div class="col-6">.col-6</div>
      </div>

      <hr>

      <h3>混合：移动，平板电脑和桌面</h3>
      <p></p>
      <div class="row">
        <div class="col-12 col-sm-6 col-lg-8">.col-12 .col-sm-6 .col-lg-8</div>
        <div class="col-6 col-lg-4">.col-6 .col-lg-4</div>
      </div>
      <div class="row">
        <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
        <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
        <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
      </div>

    </div> <!-- /container -->
  </body>
</html>
